<template>
  <div class="html_details">
    <div class="left">
      <iframe :key="iframeKey" ref="iframe" style="border: none" :srcdoc="html"></iframe>
    </div>
    <div class="rigth">
      <Suspense>
        <template #default>
          <div class="editor">
            <div class="menu">
              <el-button type="primary" round @click="updateCode(code)">运行</el-button>
            </div>
            <monacoEditor v-model="code" language="javascript"></monacoEditor>
          </div>
        </template>

        <template #fallback>
          <!-- <div>Loading...</div> -->
          <Loader2 />
        </template>
      </Suspense>
    </div>
  </div>
</template>

<script setup lang="ts">
  // import monacoEditor from "@/components/monacoEditor/index.vue";
  import { computed, nextTick, ref, watch, defineAsyncComponent } from "vue";
  import { useMenu } from "@/store/menu";
  import { useAllFiles } from "@/store/allFiles";
  // import Loader1 from "@/components/loader/Loader1.vue";
  import Loader2 from "@/components/loader/Loader2.vue";
  // 懒加载
  const monacoEditor = defineAsyncComponent(() => import("@/components/monacoEditor/index.vue"));

  const fileStore = useAllFiles();
  const store = useMenu();
  let html = ref("");
  let code = ref("");
  let iframeKey = ref(1);
  // 使用动态 import() 加载单个 HTML 文件，并使用 ?raw 参数来获取原始文本
  async function loadTemplate() {
    try {
      const module = await import("@/components/template/index.html?raw");
      html.value = module.default; // 模块的默认导出即为文件内容
      // html加载加载成功后尝试替换内容
      updateCode(code.value);
    } catch (error) {
      console.error("Failed to load template:", error);
    }
  }

  let url = computed(() => store.activeKey);
  watch([() => url.value], ([newUrl]) => {
    getInfo(newUrl);
  });

  // 声明 ref
  const iframe = ref<HTMLIFrameElement | null>(null);
  const getInfo = async (url: string) => {
    let file = fileStore.searchFileByPath(url);
    let fileCode = (await file?.moduleToString()) as string;
    code.value = fileCode;
    nextTick(() => {
      updateCode(code.value);
    });
  };

  let oldUserCode = ref(`const userCode = ""`);
  const updateCode = (code: string) => {
    if (html.value) {
      iframeKey.value = iframeKey.value + 1;
      html.value = html.value.replace(oldUserCode.value, `const userCode = \`${code}\``);
      oldUserCode.value = `const userCode = \`${code}\``;
    }
  };
  loadTemplate();
  getInfo(url.value);
  // watch([() => code.value], ([newCode]) => {
  //   nextTick(() => {
  //     updateCode(newCode);
  //   });
  // });
</script>

<style lang="scss" scoped>
  .html_details {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;

    .left,
    .rigth {
      width: 50%;
      height: 100%;
      padding: 20px;
      box-sizing: border-box;
    }

    .left iframe {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      box-shadow: 20px 20px 26px #cacaca, -20px -20px 26px #f6f6f6;
      overflow: hidden;
    }

    .rigth {
      position: relative;

      .editor {
        width: 100%;
        height: 100%;
      }

      .menu {
        display: flex;
        align-items: center;
        gap: 10px;
        position: absolute;
        right: 20px;
        top: 20px;
        transform: translateY(-100%);
        z-index: 2;
      }
    }
  }
</style>
